<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>

    <title>词云</title>
    <style>
        body {
            background-color: white;
        }

        .word-clouds-wid {
            width: 7.5rem;
            height: 7.5rem;
            color: white;
        }

    </style>
</head>
<body>

<div class="flex-column bg-white">
    <div class="word-clouds-wid flex-row justify-content-center">
        <svg id="wordSvg" font-family="sans-serif" font-size="14" text-anchor="middle"></svg>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/d3/d3.v4.min.js"></script>
<script src="../../plugin/highcharts/highcharts.js"></script>

<script>
  let pm = {
    d3Color: ['C97272', '5CAE96', 'BAB96F', '6362BB', '5A9FBB', '617AB6', 'B68A66'],
    wordColor: 'white'
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    getHotWord()
  }

  //获取本周热词
  function getHotWord() {
    let resList = {
      'ip': '180.166.81.10, 172.24.62.90, 10.221.12.90',
      'list': [{'count': '664', 'word': '中美贸易'}, {'count': '524', 'word': '中国'}, {
        'count': '462',
        'word': '快讯'
      }, {'count': '422', 'word': '股票'}, {
        'count': '271',
        'word': '宏观经济'
      }, {'count': '267', 'word': 'AI'}, {'count': '260', 'word': '美元'}, {
        'count': '259',
        'word': 'A股'
      }, {'count': '254', 'word': '美股'}, {
        'count': '220',
        'word': '美国'
      }, {'count': '211', 'word': '港股'}, {'count': '178', 'word': '人民币'}, {
        'count': '158',
        'word': '科技'
      }, {'count': '150', 'word': '汽车'}, {
        'count': '130',
        'word': '基金'
      }, {'count': '126', 'word': '券商'}, {'count': '123', 'word': '保险'}, {
        'count': '118',
        'word': '科创板'
      }, {'count': '116', 'word': '银行'}, {
        'count': '114',
        'word': '经济'
      }, {'count': '98', 'word': '债券'}, {'count': '96', 'word': '医药'}, {'count': '93', 'word': '金融'}, {
        'count': '93',
        'word': '利率'
      }, {
        'count': '93',
        'word': '消费'
      }, {'count': '75', 'word': '互联网'}, {'count': '71', 'word': '证监会'}, {'count': '71', 'word': '黄金'}, {
        'count': '69',
        'word': '微信'
      }, {
        'count': '65',
        'word': '资本市场'
      }, {'count': '61', 'word': '估值'}, {'count': '59', 'word': '房地产'}, {'count': '57', 'word': '业绩'}, {
        'count': '56',
        'word': '军工'
      }, {
        'count': '54',
        'word': '策略'
      }, {'count': '53', 'word': '金融科技'}, {'count': '52', 'word': '商品'}, {'count': '52', 'word': '创业板'}, {
        'count': '51',
        'word': 'IPO'
      }, {
        'count': '50',
        'word': '科技股'
      }, {'count': '49', 'word': '医疗'}, {'count': '48', 'word': '股市'}, {'count': '48', 'word': '大宗'}, {
        'count': '47',
        'word': '就业'
      }, {
        'count': '46',
        'word': '疫苗'
      }, {'count': '43', 'word': 'ST'}, {'count': '42', 'word': '环保'}, {'count': '41', 'word': '能源'}, {
        'count': '41',
        'word': '5G'
      }, {'count': '41', 'word': '服务业'}],
      'code': 0
    }

    let list = []
    $.each(resList.list, function (i, n) {
      if (i < 35 && Utils.notEmpty(n.word) && n.word !== '快讯') {
        list.push(n)
      }
    })
    initCircle(list)

    // todo
    //Utils.http('app/wordClouds/getHotWord', {}).then(function (res) {
    //  let list = []
    //  $.each(res.list, function (i, n) {
    //    if (i < 35 && Utils.notEmpty(n.word) && n.word !== '快讯') {
    //      list.push(n)
    //    }
    //  })
    //  initCircle(list)
    //})

  }

  //初始化词云图
  function initCircle(data) {
    let wh = (document.body.offsetWidth || document.body.offsetWidth) / 7.5 * 7.18
    let map = {}
    d3.select('svg[id="wordSvg"]').selectAll('g').remove()//清空作图区域

    let svg = d3.select('svg[id="wordSvg"]').attr('width', wh).attr('height', wh)
    let format = d3.format(',d')

    const pack = d3.pack()
      .size([wh, wh])
      .padding(1.5)
    const root = d3.hierarchy({children: data})
      .sum(function (d) {
        return d.count
      })
      .each(function (d) {
        const id = d.data.word
        d.id = id
        d.class = id
        d.colorPick = d.data.count % pm.d3Color.length
      })

    let maxR = 0, key
    let node = svg.selectAll('.node')
      .data(pack(root).leaves())
      .enter().append('g')
      .attr('class', 'node')
      .attr('style', 'cursor:pointer')
      .attr('transform', function (d) {
        return 'translate(' + d.x + ',' + d.y + ')'
      })

    //修改段落的字体大小

    //添加圆
    node.append('circle')
      .attr('id', function (d) {
        return d.id
      })
      .style('fill', function (d) {
        return '#' + pm.d3Color[d.colorPick]
      })
      .style('cursor', 'pointer')
      .attr('r', function (d) {
        if (d.r > maxR) {
          maxR = d.r
        }
        return d.r
      })
    node.append('clipPath')
      .attr('id', function (d) {
        return 'clip-' + d.id
      })
      .append('use')
      .attr('xlink:href', function (d) {
        return '#' + d.id
      })

    node.append('text')
      .attr('font-size', function (d) {
        return d.r * 14 / maxR < 9 ? 9 : d.r * 14 / maxR
      })
      .style('cursor', 'pointer')
      .attr('clip-path', function (d) {
        return 'url(#clip-' + d.id + ')'
      })
      .selectAll('tspan')
      .data(function (d) {
        map[d.id] = d.r
        let arr = new Array()
        arr.push(d.class)
        arr.push(d.data.count)
        return arr//圆内显示内容
      })
      .enter().append('tspan')
      .attr('x', 0)
      .attr('y', function (d, i, nodes) {
        let y = 25 + (i - nodes.length / 2 - 0.5) * 20
        if (i === 0) {
          key = d
          y = map[d] * 14 / maxR < 9 ? y + 4 : y
        } else if (i === 1) {
          y = map[key] * 14 / maxR < 9 ? y - 4 : y
        }
        return y
      })
      .text(function (d) {
        return d
      })
      .style('fill', pm.wordColor)
      .style('cursor', 'pointer')


    node.append('title')
      .text(function (d) {
        return d.id + '\n' + format(d.value)
      })
    node.on('click', function (d) {
      search(d.id)
    })
  }

  function search(key) {
    if (key) {
      key = key ? encodeURIComponent(Utils.replaceAll(key, '%', '%25')) : ''
      jsBridge.openWindow('html/search/search.html?key=' + key, {}, {noBar: false})
    }
  }
</script>
</html>
